<template>
  <view v-if="value" class="StartMonitoringDialog">
    <view class="dialog-content">
      <view class="dialog-body">
        确定要开始监测吗？
      </view>
      <view class="dialog-footer">
        <view>
          <button class="transparent-button" @tap="handleClose">取消</button>
        </view>
        <view>
          <button class="confirm-button" @tap="handleConfirm">确定</button>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { writeBLEState } from '@/public/BluetoothFun'

export default {
  name: 'StartMonitoringDialog',
  props: {
    value: {
      type: Boolean,
      default: false
    }
  },
  methods: {
    handleClose() {
      this.$emit('input', false)
    },
    handleConfirm() {
      writeBLEState(17)
      this.$emit('confirm')
      this.handleClose()
    }
  }
}
</script>

<style scoped lang="scss">
.StartMonitoringDialog {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 999999;

  .dialog-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 700rpx;
    height: 384rpx;
    background: url("../../../image/dialogBg.png") no-repeat;
    background-size: 100% 100%;
    padding: 40rpx;
    box-sizing: border-box;
  }

  .dialog-body {
    text-align: center;
    color: #fff;
    font-size: 32rpx;
    margin: 40rpx 0;
  }

  .dialog-footer {
    display: flex;
    justify-content: space-between;
    padding: 0 60rpx;
    margin-top: 60rpx;
    
    button {
      padding: 8rpx 80rpx;
      font-size: 32rpx;
      border-radius: 100rpx;
    }

    .transparent-button {
      color: #ffffff;
      background-color: transparent;
      border: 2px solid #4e9089;
    }

    .confirm-button {
      color: #51f08d;
      background-color: #1e7168;
      border: none;
    }
  }
}
</style>
